<template>
  <div
    class="start-node-shape basic-node"
    ref="NodeRef"
    :id="getNode().id"
    :class="{ 'node-click': nodeActiveStatusObject[getNode().id] }"
  >
    <BasicNodeTop />
    <div class="content" v-if="!nodeDta.isNodeFold">
      <div class="flex-space mr-b-16">
        <div>
          <span>
            <el-link
              :underline="false"
              class="link-btn"
              @click="nodeDta.isInputFold = !nodeDta.isInputFold"
            >
              <el-icon v-show="!nodeDta.isInputFold"><ArrowDown /></el-icon>
              <el-icon v-show="nodeDta.isInputFold"><ArrowRight /></el-icon>
            </el-link>
          </span>
          <span>输入</span>
        </div>
        <div>
          <el-link :underline="false" type="primary" @click="openVariateDialog(PageTypeEnum.ADD)">
            <el-icon><Plus /></el-icon>
          </el-link>
        </div>
      </div>
      <el-table
        v-show="!nodeDta.isInputFold"
        :data="nodeDta.input_variables"
        class="table-node"
        :border="false"
      >
        <el-table-column prop="label" label="变量名">
          <template #default="{ row }">
            <el-tooltip effect="dark" :content="row.label" placement="top-start">
              <div class="single-line-ellipsis">{{ row.label }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="变量类型" width="70">
          <template #default="{ row }">
            {{ VariableList.find(item => item.value === row.type)?.name }}
          </template>
        </el-table-column>
        <el-table-column prop="required" label="是否必填" align="center" width="60">
          <template #default="{ row }">
            <el-checkbox
              class="custom-checkbox"
              v-model="row.required"
              size="small"
              :disabled="builtInVariables.includes(row.variable)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="60">
          <template #default="{ row }">
            <el-link
              :underline="false"
              class="fs-12"
              style="margin-right: 4px;"
            >
              <el-icon><EditPen /></el-icon>
            </el-link>
            <el-link
              :underline="false"
              class="fs-12"
              :disabled="builtInVariables.includes(row.variable)"
            >
              <el-icon><Delete /></el-icon>
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <StartNodeDialog ref="StartNodeDialogRef" @saveVariable="saveVariable"/>
  </div>
</template>

<script setup lang="ts" name="StartNodeShape">
import {inject, nextTick, onMounted, ref} from 'vue';
import {workFlowStoreCounter} from '@/store/work-flow';
import {storeToRefs} from 'pinia';
import BasicNodeTop from '@/view/graph/component/basic-node-top/basic-node-top.vue';
import {GenerationNodeData} from '@/view/graph/methods/methods';
import {NODES_MAP} from '@/view/graph/model/nodes';
import {builtInVariables, NodeTile, StartNode, StartNodeInputVariables, VariableList} from '@/view/graph/model/type';
import {PageTypeEnum} from '@/utils/public-model/public-model';
import {cloneDeep} from 'lodash';
import StartNodeDialog from '@/view/graph/component/custom-node-shape/start-node-dialog/start-node-dialog.vue';
import {ElMessage} from "element-plus";

const getNode = inject('getNode') as () => any;

const workFlowStore = workFlowStoreCounter();

const nodeForm = GenerationNodeData({ code: NODES_MAP.START, name: '开始' }) as StartNode &
    NodeTile;
const nodeDta = ref<StartNode & NodeTile>({
  ...nodeForm
});

const { nodeActiveStatusObject } = storeToRefs(workFlowStore);

const NodeRef = ref(null);
const StartNodeDialogRef = ref();

onMounted(() => {
  nextTick(() => {
    const observer = new ResizeObserver(handleResize);
    if (NodeRef.value) {
      observer.observe(NodeRef.value);
    }
  });
});

/**
 * 监听节点宽高变化
 */
const handleResize = (entries: any) => {
  for (let entry of entries) {
    const { scrollWidth, scrollHeight } = entry.target;
    getNode().size(scrollWidth, scrollHeight);
  }
};

/**
 * 打开变量弹窗
 * @param type
 * @param row
 */
function openVariateDialog(type: string, row?: StartNodeInputVariables) {
  StartNodeDialogRef.value.init(type, cloneDeep(row));
}

/**
 * 保存变量
 * @param startNodeInputVariable
 * @param pageType
 */
function saveVariable(startNodeInputVariable: StartNodeInputVariables, pageType: string) {
  const filterVariable = nodeDta.value.input_variables.filter(
      item => item.id !== startNodeInputVariable.id
  );
  const isVariable = filterVariable.some(item => item.variable === startNodeInputVariable.variable);
  if (isVariable) {
    ElMessage.warning('已存在相同的变量key');
    return false;
  }
  const isLabel = filterVariable.some(item => item.label === startNodeInputVariable.label);
  if (isLabel) {
    ElMessage.warning('已存在相同的变量名');
    return false;
  }
  if (pageType === PageTypeEnum.ADD) {
    nodeDta.value.input_variables.push(startNodeInputVariable);
  } else {
    const index = nodeDta.value.input_variables.findIndex(
        item => item.id === startNodeInputVariable.id
    );
    nodeDta.value.input_variables[index] = startNodeInputVariable;
  }
  StartNodeDialogRef.value.dialogVisible = false;
  // NodeDataStore.changeNodeData(new Date());
}
</script>
<style scoped lang="scss">
.start-node-shape {
  width: 352px;
  .content {
    background: rgba(42, 48, 58, 0.04);
    padding: 12px 15px;
    color: #2a303a;
    font-weight: 500;
    font-size: 14px;
  }
}
</style>
